<style scoped lang="less">
@media screen and (min-width: 829px) {
  .results {
    overflow: hidden;
    width: 100%;
    min-height: 80rem;
    background-color: #F6F7FB;
    padding-bottom: 10rem;
    .resultsWrap {
      margin: 0 auto;
      width: 90%;
      overflow: hidden;
      height: 100%;
      .title {
        text-align: center;
        height: 2.21rem;
        font-size: 2.36rem;
        
        color: rgba(51, 51, 51, 1);
        line-height: 1.79rem;
        margin-top: 7.14rem;
      }

      .search {
        margin: 2.9rem auto 1.3rem;
        height: 2rem;
        position: relative;
        .searchBox {
          width: 90%;
          margin-left: 5%;
          height: 2rem;
          border-radius: 1.14rem;
          border: 2px solid #999999;
          padding-left: 15px;
          background-color: white;
        }
        .searchLogo {
          position: absolute;
          font-size: 1rem;
          right: 3rem;
          top: 0.65rem;
          cursor: pointer;
          color: rgba(153,153,153,1);
        }
      }

      .searchLi {
        height: 1.2rem;
        ul {
          width: 100%;
          li {
            float: left;
            /*padding-left: 9.14%*/
            width: 14.2%;
            text-align: center;
            font-size: 1.29rem;
            cursor: pointer;
          }
          .active {
            color: #F37D0A;
          }
        }
      }

      .listWord {
        background: rgba(248, 243, 235, 1);
        border-radius: 0.21rem;
        margin-top: 2.8rem;
        height: 3.29rem;
        li {
          float: left;
          line-height: 3.29rem;
          font-size: 1rem;
          
          color: #CFB397;
          /*padding-left: 2px;*/
        }
        li:nth-child(1) {
          width: calc(80%-2.4rem);
          /*width: 80%;*/
          padding-left: 1.3rem;
        }
        li:nth-child(2),
        li:nth-child(3) {
          width: 10%;
          text-align: center;
        }
      }
      .wpsUl {
        min-height: 51.4rem;
        background-color: white;
      }
      .listInfoWrap {
        margin-top: 1.5rem;
      }
      .listInfoWrapContent {
        /*max-height: 50rem;*/
        /*margin-top: 1.5rem;*/
        .wpsUl li {
          width: 100%;
          font-size: 0rem;
          line-height: 4.3rem;
          height: 4.3rem;
          cursor: pointer;
          border-bottom: 1px solid #EBEBEB;
        }
        .word {
          padding-left: 1.5rem;
          /*padding-top: 1.57rem;*/
          /*padding-bottom: 1.57rem;*/
          display: inline-block;
          /*width: 80%;*/
          width: calc(80%-3rem);
          height: 100%;

          img {
            display: inline-block;
            margin: 0;
            max-width: 1.29rem;
            max-height: 1.29rem;
            padding-right: 0.64rem;
            margin-bottom: 1.6rem;
          }
          span {
            width: 80%;
            display: inline-block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size: 1.14rem;
            
            color: rgba(51, 51, 51, 1);
          }
        }
        .date,
        .num {
          float: right;
          display: inline-block;
          font-size: 1rem;
          
          color: rgba(153, 153, 153, 1);
          /*line-height: 0rem;*/
          text-align: center;
          width: 10%;
          /*height: 100%;*/
          span{
            display: none;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 829px) {
  .results {
    .resultsWrap{
      height: auto;
      background-color: #f6f7fb;
    }
    /*background-color: #F6F7FB;*/
    * {
      box-sizing: border-box;
    }
    .title,
    .fill {
      display: none
    }
    .search {
      width: 100%;
      padding: 0 0.32rem;
      background-color: #fff;
      position: relative;
      float: inherit;
    }
    .searchBox {
      height: 0.72rem;
      background-color: #ECECEC;
      width: 100%;
      font-size: 0.26rem;
      padding: 0.2rem 0.3rem;
    }
    .searchLogo {
      position: absolute;
      right: 0.6rem;
      top: 0;
      line-height: 0.72rem;
      font-size: 0.4rem;
    }
    .searchLi {
      height: 1.2rem;
      float: inherit;
      background-color: #fff;
      line-height: 1.2rem;
      font-size: 0.26rem;
      color: #474747;
      width: 100%;
      li {
        width: 14%;
        text-align: center;
        float: left;
      }
      .active {
        color: #FD9D40;
        font-size: 0.3rem;
      }
    }

    .listInfoWrap {
      background-color: #fff;
      clear: both;
      margin-top: 0.2rem;
      width: 100%;
      float: inherit;
      li {
        padding: 0.4rem 0.3rem;
        border-bottom: solid 1px #ECECEC;

      }
    }
    .listInfo {
      clear: both;
      li{
        border-bottom: 1px solid #EBEBEB;
        padding: .31rem;
      }
    }
    .word {
      color: #1a1a1a;
      font-weight: bold;
      font-size: 0.3rem;
      margin-bottom: 0.1rem;
      img {
        display: inline-block;
        width: 0.28rem;
        vertical-align: top;
        margin-top: 0.07rem;
      }
      span{
        display: inline-block;
        width: 90%;
        font-size: .3rem;
      }
    }
    .date {
      margin-left: 0.35rem;
    }
    .date,
    .num {
      font-size: 0.22rem;
      color: #888;
      display: inline-block;
    }
  }
}

@media screen and (min-width: 1757px) and (max-width: 1920px) {
  .listWord li:nth-child(3){
    padding-left: 10px !important;
  }
}
@media screen and (min-width: 1516px) and (max-width: 1757px) {
  .listWord li:nth-child(3){
    padding-left: 6px !important;
  }
}
</style>
<template>
    <div class="results">
        <div class="resultsWrap">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" class="title">
                培训资料&nbsp;&nbsp;PEIXUNZILIAO
            </el-col>
            <div>
                <el-col :xs="5" :sm="5" :md="5" :lg="5" class="fill" style="height: 2rem"></el-col>
                <el-col :xs="14" :sm="14" :md="14" :lg="14" class="search">
                    <input type="text" v-model="searchData" class="searchBox" placeholder="请输入想搜索的关键词" @keyup.enter="searchDoc">
                    <span class="icon-search searchLogo" @click="searchDoc"></span>
                </el-col>
            </div>
            <div class="searchLi-box">
                <el-col :xs="0" :sm="6" :md="6" :lg="6" class="fill" style="height: 2rem"></el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" class="searchLi">
                    <ul class="clear">
                        <li :class="{'active':1==num}" @click="active(1)">全部</li>
                        <li :class="{'active':2==num}" @click="active(2)">DOC</li>
                        <li :class="{'active':3==num}" @click="active(3)">PPT</li>
                        <li :class="{'active':4==num}" @click="active(4)">PDF</li>
                        <li :class="{'active':5==num}" @click="active(5)">XLS</li>
                        <li :class="{'active':6==num}" @click="active(6)">音频</li>
                        <li :class="{'active':7==num}" @click="active(7)">其他</li>
                    </ul>
                </el-col>
            </div>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" class="fill">
                <el-col :xs="3" :sm="3" :md="3" :lg="3" class="listWord" style="background-color: #F6F7FB"></el-col>
                <el-col :xs="18" :sm="18" :md="18" :lg="18" class="listWord">
                    <ul class="listInfo clear">
                        <li>资料题目</li>
                        <li>上传日期</li>
                        <li>浏览量</li>
                    </ul>
                </el-col>
            </el-col>
          <!--<div class="fill">-->
            <!--<div class="listWord">-->
              <!--<ul class="listInfo clear">-->
                <!--<li>资料题目</li>-->
                <!--<li>上传日期</li>-->
                <!--<li>浏览量</li>-->
              <!--</ul>-->
            <!--</div>-->
          <!--</div>-->
            <div class="kycg">
                <el-col :xs="0" :sm="3" :md="3" :lg="3" class="fill listInfoWrap"></el-col>
                <el-col :xs="24" :sm="18" :md="18" :lg="18" class="listInfoWrapContent">
                    <ul class="listInfo clear wpsUl">
                        <li @click="goActive(item)" v-for="(item,index) in resultsData">
                            <div class="word">
                                <img :src="item.Icons">
                                <span>{{item.Name}}</span>
                            </div>
                          <p class="num"><span>浏览：</span>{{item.Viewed}}</p>
                          <p class="date">{{$bw.format(item.PublishTime,'date')}}</p>
                        </li>
                    </ul>
                </el-col>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            num: 1,
            type: '',
            searchData: '',
            resultsData: [],
            requestData: {
                "Filter": [
                ],
                IsPage: false
            }
        }
    },
    components: {

    },
    methods: {
        active(index) {
            this.num = index
            if (index == 1) {
                this.removeOtherFliter();
                var resultIndex = this.sumSerachData("AttachmentUrl");
                if (resultIndex >= 0) {
                    this.requestData.Filter.splice(resultIndex, 1);
                }
                this.getResultsList();
            }
            if (index == 2) {
                this.removeOtherFliter();
                var resultIndex = this.sumSerachData("AttachmentUrl");
                if (resultIndex >= 0) {
                    this.requestData.Filter[resultIndex].FieldValue = 'doc';
                } else {
                    this.requestData.Filter.push({
                        "GroupName": "state",
                        "FieldName": "AttachmentUrl",
                        "FieldValue": "doc",
                        "SqlOperator": 0,
                        "IsQuery": true
                    })
                }
                this.getResultsList();
            }
            if (index == 3) {
                this.removeOtherFliter();
                var resultIndex = this.sumSerachData("AttachmentUrl");
                if (resultIndex >= 0) {
                    this.requestData.Filter[resultIndex].FieldValue = "ppt";
                } else {
                    this.requestData.Filter.push({
                        "GroupName": "state",
                        "FieldName": "AttachmentUrl",
                        "FieldValue": "ppt",
                        "SqlOperator": 0,
                        "IsQuery": true
                    })
                }
                this.getResultsList();
            }
            if (index == 4) {
                this.removeOtherFliter();
                var resultIndex = this.sumSerachData("AttachmentUrl");
                if (resultIndex >= 0) {
                    this.requestData.Filter[resultIndex].FieldValue = "pdf";
                } else {
                    this.requestData.Filter.push({
                        "GroupName": "state",
                        "FieldName": "AttachmentUrl",
                        "FieldValue": "pdf",
                        "SqlOperator": 0,
                        "IsQuery": true
                    })
                }
                this.getResultsList();
            }
            if (index == 5) {
                this.removeOtherFliter();
                var resultIndex = this.sumSerachData("AttachmentUrl");
                if (resultIndex >= 0) {
                    this.requestData.Filter[resultIndex].FieldValue = "xls";
                } else {
                    this.requestData.Filter.push({
                        "GroupName": "state",
                        "FieldName": "AttachmentUrl",
                        "FieldValue": "xls",
                        "SqlOperator": 0,
                        "IsQuery": true
                    })
                }
                this.getResultsList();
            }
            if (index == 6) {
                this.removeOtherFliter();
                var resultIndex = this.sumSerachData("AttachmentUrl");
                if (resultIndex >= 0) {
                    this.requestData.Filter[resultIndex].FieldValue = "mp3";
                } else {
                    this.requestData.Filter.push({
                        "GroupName": "state",
                        "FieldName": "AttachmentUrl",
                        "FieldValue": "mp3",
                        "SqlOperator": 0,
                        "IsQuery": true
                    })
                }
                this.getResultsList()
            }
            if (index == 7) {
                var filterData = {
                    "Filter": [
                    ],
                    IsPage: false
                }
                filterData.Filter.push({
                    "GroupName": "except",
                    "FieldName": "AttachmentUrl",
                    "FieldValue": "mp3",
                    "SqlOperator": 1,
                    "IsQuery": true
                })
                filterData.Filter.push({
                    "GroupName": "except1",
                    "FieldName": "AttachmentUrl",
                    "FieldValue": "xlsx",
                    "SqlOperator": 1,
                    "IsQuery": true
                })
                filterData.Filter.push({
                    "GroupName": "except2",
                    "FieldName": "AttachmentUrl",
                    "FieldValue": "ppt",
                    "SqlOperator": 1,
                    "IsQuery": true
                })
                filterData.Filter.push({
                    "GroupName": "except3",
                    "FieldName": "AttachmentUrl",
                    "FieldValue": "doc",
                    "SqlOperator": 1,
                    "IsQuery": true
                })
                filterData.Filter.push({
                    "GroupName": "except4",
                    "FieldName": "AttachmentUrl",
                    "FieldValue": "pdf",
                    "SqlOperator": 1,
                    "IsQuery": true
                })
                this.requestData = filterData;
                this.getResultsList();
            }
        },
        goActive(item) {
            this.$router.push({ path: '/ideaTrainMaterialInfo', query: { attachmentId: item.AttachmentId } })
        },
        getResultsList() {
            //      var loading=this.$toast.showLoading()
            this.requestData.Condition = this.requestData.Filter;
            this.$service('/api/WeChat/GetAttachmentPageList', 'post', this.requestData).then((response) => {
                if (response.Data) {
                    this.resultsData = response.Data.Items
                } else {
                    this.resultsData = [];
                }

            }).catch(err => {
                //          this.fullscreenLoading=false;
                if (err.Data) {
                    this.resultsData = err.Data.Items
                } else {
                    this.resultsData = [];
                }
            })
        },
        sumSerachData(name) {
            for (var i = 0; i < this.requestData.Filter.length; i++) {
                var item = this.requestData.Filter[i];
                if (item.FieldName == name) {
                    return i
                }
            }
            return -1;
        },
        searchDoc() {
            var resultIndex = this.sumSerachData("Name");
            if (this.searchData.length < 1) {
                if (resultIndex >= 0) {
                    this.requestData.Filter.splice(resultIndex, 1);
                    return;
                }
            } else {
                if (resultIndex >= 0) {
                    this.requestData.Filter[resultIndex].FieldValue = this.searchData;
                } else {
                    this.requestData.Filter.push({
                        "GroupName": "xx",
                        "FieldName": "Name",
                        "FieldValue": this.searchData,
                        "SqlOperator": 0,
                        "IsQuery": true
                    })
                }
            }
            this.getResultsList();
        },
        removeOtherFliter() {
            var except = ['except', 'except1', 'except2', 'except3', 'except4'];
            for (var k = 0; k < except.length; k++) {
                var name = except[k];
                for (var i = 0; i < this.requestData.Filter.length; i++) {
                    var item = this.requestData.Filter[i];
                    if (item.GroupName == name) {
                        this.requestData.Filter.splice(i, 1);
                    }
                }
            }
        }
    },

    mounted() {
        this.type = this.$route.query.type;
        this.getResultsList();
    },
    filters: {

    }
}

</script>
